<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>忘记密码页面</title>
    <!--解决乱码问题-->
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
    <!--2.引入 JQuery -->
    <!--    <script src="asserts/plugins/JQuery/jquery-2.1.1.min.js"></script>-->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <!--3.引入线上 Bootstrap 的 js 文件-->
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
    <!--4.validate核心校验文件-->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.js"></script>
    <!--5.中文校验-->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery.bootstrapvalidator/0.5.3/js/language/zh_CN.js"></script>
    <link href="asserts/css/forgetPassword.css" rel="stylesheet">
    <script src="asserts/js/ajax.js" rel="script"></script>
    <script type="text/javascript">
        $(function () {
            $("#form_1").bootstrapValidator({
                feedbackIcons: {
                    //校验通过时的输入框状态
                    valid: 'glyphicon glyphicon-ok',
                    //校验失败时的输入框状态
                    invalid: 'glyphicon glyphicon-remove',
                    //校验中的输入框状态
                    validating: 'glyphicon glyphicon-refresh'
                },
                fields: {
                    username: {
                        message: '用户名有误',
                        validators: {
                            notEmpty: {
                                message: '用户名不能为空'
                            },
                            stringLength: {
                                min: 1,
                                max: 10
                            }
                        }
                    },
                    password: {
                        validators: {
                            notEmpty: {
                                message: '密码不能为空'
                            },
                            stringLength: {
                                min: 3,
                                max: 12
                            }
                        }
                    },
                    phonenumber: {
                        validators: {
                            notEmpty: {
                                message: '手机不能为空'
                            },
                            regexp: {
                                regexp: '^1[0-9]{10}$',
                                message: '手机号格式错误'
                            }
                        }
                    }

                }
            })
            $("#submitTo").click(function () {
                myGetAjax(
                    "/catering_system_app/user/checkUserByPhone",
                    {
                        userName:$("#username").val(),
                        phone:$("#phone").val()
                    },
                    checkUserByPhone
                )
            })

        })
        function checkUserByPhone(RespVo) {

            if (RespVo.code=="200"){
                alert(RespVo.code);
                var str="";
                str = "<form id='form_1'>"+
                    "<div class='form-group'>" +
                    "      <label>新密码</label>" +
                    "      <input type='password' class='form-control' class='newPassword' id='newPassword'>" +
                    "</div>" +
                    "<div class='form-group'>" +
                    "      <label>新密码确认</label>" +
                    "      <input type='password' class='form-control' class='newPassword' id='passwordTwo'>" +
                    "      <span id='checkNewPassword'></span>" +
                    "</div>" +
                    "<div class='form-group'>" +
                    "      <button class='btn btn-default btn-lg btn-warning btn-block' id='rePassword'>修改</button>" +
                    "</div></form>";
                    $("#form_1").html(str);
                $("#passwordTwo").blur(function () {
                    if ($("#passwordTwo").val() == $("#newPassword").val()) {
                        $("#checkNewPassword").attr("style", "color:green");
                        $("#checkNewPassword").text("两次密码一致");
                    } else {
                        $("#checkNewPassword").attr("style", "color:red");
                        $("#checkNewPassword").text("两次密码不一致")
                    }
                });
                $("#rePassword").click(function () {
                    if ( $("#checkNewPassword").text()=="两次密码一致") {
                        myGetAjax(
                            "/catering_system_app/user/rePassword",
                            {
                                userId:RespVo.data.userId,
                                password: $("#newPassword").val()
                            },
                            changeMyPassword
                        )
                    }
                })
            }else {
                $("span").attr("style","color:red");
                $("span").text("用户名或电话有吴")
            }
        }
        function changeMyPassword(RespVo) {
            if (RespVo.code=="200"){
                alert("密码修改成功")
                location.href="index.html"
            }else {
                alert(RespVo.msg)
            }
        }
    </script>
</head>
<body>
<div class="container">
    <div class="row" id="row_1">
        欢迎来到餐饮系统管理忘记密码页面
    </div>
    <div class="row" id="row_2">
        <div class="col-md-4"></div>
        <div class="col-md-4" id="col-2">
            <form id="form_1">
                <div class="form-group">
                    <label>请输入用户名</label>
                    <input type="text" class="form-control" name="username" id="username">
                </div>
                <div class="form-group">
                    <label>请输入手机号码</label>
                    <input type="text" class="form-control" name="phone" id="phone">
                </div>
                <div>
                    <span></span>
                </div>
                <div class="form-group">
                    <button type="button" class="btn btn-default btn-lg btn-warning btn-block" id="submitTo">提交</button>
                </div>
            </form>
        </div>
        <div class="col-md-4"></div>
    </div>
    <div class="row" id="row_3">
        千锋教育机构广州分校&nbsp;&nbsp;&nbsp;&nbsp;java-2103班第一小组&nbsp;&nbsp;&nbsp;&nbsp;版权所有
    </div>
</div>
</body>
</html>